<template>
<div class="full">

  <ImageShowArea class="up" :urls="imageShowAreaMap"></ImageShowArea>
    <div class="down">
      <UpLoadArea class="upload" @uploaded="uploaded"></UpLoadArea>
    </div>
</div>
</template>

<script setup>

import ImageShowArea from "@/components/ImageShow/ImageShowArea.vue";
import {ref} from "vue"
import Config from "@/config.js";
import UpLoadArea from "@/components/upload/UpLoadArea.vue";
import axios from "axios";


let map = new Map()
map.set(Config.images.constantTitle.OriginalDrawing,Config.images.defaultImage)
map.set(Config.images.constantTitle.Three,Config.images.defaultImage)
map.set(Config.images.constantTitle.Expression,Config.images.defaultImage)
map.set(Config.images.constantTitle.mix,Config.images.defaultImage)

let imageShowAreaMap = ref(map)

function uploaded(args){

  let temp = args.split("/")
  let fileName = temp[temp.length-1]
  imageShowAreaMap.value.set(Config.images.constantTitle.OriginalDrawing,args)

  process(fileName,Config.process.rebuild).then((res)=>{
    imageShowAreaMap.value.set(Config.images.constantTitle.Three,res.data.filename)
  })

  process(fileName,Config.process.expression).then((res)=>{
    imageShowAreaMap.value.set(Config.images.constantTitle.Expression,res.data.filename)
  })

  process(fileName,Config.process.mix).then((res)=>{
    imageShowAreaMap.value.set(Config.images.constantTitle.mix,res.data.filename)
  })

}

function process(fileName,process_name){
  return axios.get(`http://localhost:8000/process/${fileName}/${process_name}`)
}


</script>



<style scoped>

.full{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.up{
  width: 100%;
  height: 70%;
  display: flex;
  justify-content: space-around;
}

.down{
  width: 100%;
  height: 20%;
  display: flex;
  justify-content: center;
  align-items: center;

}

.image{
  width: 25%;
  height: 50vh;
  margin-top: 10vh;
}

.upload{
  height: 100%;
  width: 75%;
}

.emo{
  width: 100%;
  height: 80%;
  background-color: #2c3e50;
}

.label{
  width: 100%;
  height: 20%;
  background-color: skyblue;
}

</style>



